import React, { Component } from 'react'

// 表单 非受控组件：通过手动操作dom的方式获取文本框的值， input 框的状态不受React组件的state状态控制
// react里面通过ref来获取组件或者dom元素。要使用ref之前必须先调用React.createRef方法来创建一个ref
import { createRef } from 'react'     // 导入 createRef 函数
class FormCom extends Component {

    msgRef = createRef()            // 这个实例属性是可以自定义名字的

    // 通过msgRef获取input的value值
    getInputValue = () => {
        console.log(this.msgRef.current.value);
    }

    render () {
        return (
            <div>
                {/* 给 input 添加ref属性，绑定自定义的 ref */}
                <input 
                    type="text" 
                    ref={this.msgRef} />
                <button onClick={this.getInputValue}>获取输入框的值</button>
            </div>
        )
    }
}

// 表单 受控组件，input 框自己的状态被React组件状态控制
class FormComponent extends Component {
    // 声明用来控制input value的react组件自己的状态
    state = {
        message: 'input 信息传递'
    }

    inputChange = (e) => {
        // console.log(e);
        // 拿到输入框最新的值，赋给state中的message
        this.setState({
            // message: e.currentTarget.value           // 这个也行
            message: e.target.value
        })
    }

    render () {
        return (
            <div>
                {/* 给input框的value属性绑定 react state */}
                {/* 给input框绑定一个change事件，可以拿到当前输入框的数据 */}
                <input 
                    type="text" 
                    value={this.state.message}
                    onChange={this.inputChange} />
            </div>
        )
    }
}

export default class Test5_com_form extends Component {
  render() {
    return (
      <div>
        <FormComponent />
        <FormCom />
      </div>
    )
  }
}
